<template>
  <div>
    <px-tabs v-model="activeWater" class="equipment-tabs" style="margin-bottom: 10px; margin-left: 10px; background: none" @tab-click="getcharts">
      <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
        <template #label>
          <p class="pane-bottom">{{ item.label }}</p>
          <p class="pane-line" />
        </template>
      </px-tab-pane>
    </px-tabs>
    <px-row style="height: 64px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <px-radio-group v-model="queryParams.timeUnit" style="position: relative; top: -12px; margin-right: 16px" @change="timechange">
              <px-radio-button label="DAY">日</px-radio-button>
              <px-radio-button label="MONTH">月</px-radio-button>
              <px-radio-button label="YEAR">年</px-radio-button>
            </px-radio-group>

            <px-form-item v-if="queryParams.timeUnit == 'YEAR'" label="年份">
              <!-- <px-date-picker v-model="queryParams.Time" type="year" placeholder="请选择" /> -->
              <yearPicker :labelWidth="0" labelText="" :initYear="dateValue" @updateTimeRange="updateStatisticYear" />
            </px-form-item>
            <px-form-item v-if="queryParams.timeUnit == 'MONTH'" label="月份">
              <px-date-picker
                v-model="dateRange"
                type="monthrange"
                range-separator="-"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                placeholder="请选择"
                format="YYYY-MM"
                value-format="YYYY-MM"
                @change="settime"
              />
            </px-form-item>
            <px-form-item v-if="queryParams.timeUnit == 'DAY'" style="width: 440px !important" label="时间">
              <px-date-picker
                v-model="dateRange2"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="请选择"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="settime2"
              />
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
            <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
          </px-form>
        </div>
      </px-col>
    </px-row>
    <px-row style="margin-top: 16px" :gutter="16">
      <!-- <px-col v-for="(item, index) in chartsList" :key="index" :span="8" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle :title="item.itemName" />
          <div class="model_chart" style="margin-top: 16px">
            <chartswwt style="width: 100%" :chartvlue="item" :width="'100%'" :height="'290px'" />
          </div>
        </div>
      </px-col> -->
      <px-col v-if="activeWater == 'purewater'" :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="纯水量" />
          <px-table :data="tableData1" border show-summary style="width: 100%; margin-top: 16px">
            <px-table-column prop="id" label="序号" />
            <px-table-column prop="name" label="名称" />
            <px-table-column prop="water" label="水量（m³）" />
            <px-table-column prop="tbi" label="同比（%）" />
            <px-table-column prop="hbi" label="环比（%）" />
          </px-table>
        </div>
      </px-col>
      <px-col v-if="activeWater == 'purewater'" :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="纯水量CHART" />
          <div style="height: 236px">
            <chartswwt :maxvalue="260" style="width: 100%" :chartvlue="chart1" :width="'100%'" :height="'236px'" />
          </div>
        </div>
      </px-col>
      <px-col v-if="activeWater == 'tabwater'" :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="自来水" />
          <px-table :data="tableData2" border show-summary style="width: 100%; margin-top: 16px">
            <px-table-column prop="id" label="序号" />
            <px-table-column prop="name" label="名称" />
            <px-table-column prop="water" label="自来水量（m³）" />
            <px-table-column prop="tbi" label="同比（%）" />
            <px-table-column prop="hbi" label="环比（%）" />
          </px-table>
        </div>
      </px-col>
      <px-col v-if="activeWater == 'tabwater'" :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="自来水CHART" />
          <div style="height: 344px">
            <chartswwt :maxvalue="450" style="width: 100%" :chartvlue="chart2" :width="'100%'" :height="'344px'" />
          </div>
        </div>
      </px-col>
      <px-col v-if="activeWater == 'wastewater'" :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="废水处理量" />
          <px-table :data="tableData3" border show-summary style="width: 100%; margin-top: 16px">
            <px-table-column prop="id" label="序号" />
            <px-table-column prop="name" label="名称" />
            <px-table-column prop="water" label="废水处理量（m³）" />
            <px-table-column prop="tbi" label="同比（%）" />
            <px-table-column prop="hbi" label="环比（%）" />
          </px-table>
        </div>
      </px-col>
      <px-col v-if="activeWater == 'wastewater'" :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="废水处理量CHART" />
          <div style="height: 272px">
            <chartswwt :maxvalue="700" style="width: 100%" :chartvlue="chart3" :width="'100%'" :height="'272px'" />
          </div>
        </div>
      </px-col>
    </px-row>
  </div>
</template>
<script setup lang="ts">
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import chartswwt from "./components/chartswwt.vue";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { testQualityqueryReport } from "@/api/waterQualityDetection";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
const activeWater = ref("tabwater");
const tabPaneList = [
  {
    label: "自来水",
    name: "tabwater"
  },
  {
    label: "纯水",
    name: "purewater"
  },
  {
    label: "废水",
    name: "wastewater"
  }
];
const dateValue = ref<any>({ startYear: new Date().getFullYear() - 6, endYear: new Date().getFullYear() });
const updateStatisticYear: any = (startYear: number, endYear: number) => {
  console.log("选中年份", startYear, endYear);
  // queryParams.value.dateRange = [startYear.toString(), endYear.toString()];
  queryParams.value.startTime = `${startYear}-01-01 00:00:00`;
  queryParams.value.endTime = `${endYear}-12-31 23:59:59`;
};
const timechange = val => {
  getList();
};
const getsixmonth = () => {
  const date = new Date();
  let SixMon = new Date(date);
  SixMon.setMonth(SixMon.getMonth() - 6);
  console.log(SixMon.toISOString().split("T")[0].slice(0, -3));
  return SixMon.toISOString().split("T")[0].slice(0, -3);
};
const getdate = () => {
  const date = new Date();
  return date.toISOString().split("T")[0].slice(0, -3);
};
const data = reactive({
  queryParams: {
    timeUnit: "DAY",
    systemCode: "",
    samplingLocationCode: "",
    testItem: "",
    samplingTimeStart: "",
    samplingTimeEnd: ""
  },
  syetemList: [],
  samplingLocationList: [],
  dateRange: [],
  testItemList: [],
  chartsList: [],
  tableData1: [],
  tableData2: [],
  tableData3: [],
  chart1: [],
  chart2: [],
  chart3: [],
  dateRange2: []
});

const {
  tableData1,
  tableData2,
  tableData3,
  chart1,
  chart2,
  chart3,
  queryParams,
  syetemList,
  samplingLocationList,
  dateRange,
  dateRange2,
  testItemList,
  chartsList
} = toRefs(data);

onMounted(() => {
  dateRange.value = [`${getsixmonth()}`, `${getdate()}`];
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  dateRange2.value = [formatDate(start), formatDate(end)];

  // getList();
});
const getRandomInt = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
tableData1.value = [
  {
    id: 1,
    name: "PCW/MAU用水",
    water: getRandomInt(100, 120),
    tbi: getRandomInt(1, 25),
    hbi: getRandomInt(1, 25)
  },
  {
    id: 2,
    name: "UPW供水",
    water: getRandomInt(100, 120),
    tbi: getRandomInt(1, 25),
    hbi: getRandomInt(1, 25)
  },
  {
    id: 3,
    name: "LSR供水",
    water: getRandomInt(100, 120),
    tbi: getRandomInt(1, 25),
    hbi: getRandomInt(1, 25)
  },
  {
    id: 4,
    name: "Rinse回水",
    water: getRandomInt(100, 120),
    tbi: getRandomInt(1, 25),
    hbi: getRandomInt(1, 25)
  }
];
tableData2.value = [
  {
    id: 1,
    name: "自来水供水",
    water: getRandomInt(220, 250),
    tbi: getRandomInt(1, 14),
    hbi: getRandomInt(1, 14)
  },
  {
    id: 2,
    name: "纯水生产线用水",
    water: getRandomInt(220, 250),
    tbi: getRandomInt(1, 14),
    hbi: getRandomInt(1, 14)
  },
  {
    id: 3,
    name: "纯水验证线用水",
    water: getRandomInt(220, 250),
    tbi: getRandomInt(1, 14),
    hbi: getRandomInt(1, 14)
  },
  {
    id: 4,
    name: "LSR用水",
    water: getRandomInt(220, 250),
    tbi: getRandomInt(1, 14),
    hbi: getRandomInt(1, 14)
  },
  {
    id: 5,
    name: "WWT中水供水",
    water: getRandomInt(220, 250),
    tbi: getRandomInt(1, 14),
    hbi: getRandomInt(1, 14)
  },
  {
    id: 6,
    name: "废弃洗涤塔用水量",
    water: getRandomInt(220, 250),
    tbi: getRandomInt(1, 14),
    hbi: getRandomInt(1, 14)
  },
  {
    id: 7,
    name: "冷却塔用水",
    water: getRandomInt(220, 250),
    tbi: getRandomInt(1, 14),
    hbi: getRandomInt(1, 14)
  }
];

tableData3.value = [
  {
    id: 1,
    name: "酸碱废水系统",
    water: getRandomInt(300, 400),
    tbi: getRandomInt(1, 20),
    hbi: getRandomInt(1, 20)
  },
  {
    id: 2,
    name: "含氟废水系统",
    water: getRandomInt(300, 400),
    tbi: getRandomInt(1, 20),
    hbi: getRandomInt(1, 20)
  },
  {
    id: 3,
    name: "含氨废水系统",
    water: getRandomInt(300, 400),
    tbi: getRandomInt(1, 20),
    hbi: getRandomInt(1, 20)
  },
  {
    id: 4,
    name: "含钴废水系统",
    water: getRandomInt(300, 400),
    tbi: getRandomInt(1, 20),
    hbi: getRandomInt(1, 20)
  },
  {
    id: 5,
    name: "含铜废水系统",
    water: getRandomInt(300, 400),
    tbi: getRandomInt(1, 20),
    hbi: getRandomInt(1, 20)
  }
];

chart1.value = [
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(100, 120)
      }
    ],
    unit: "水量(m³)",
    itemName: "PCW/MAU用水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(100, 120)
      }
    ],
    unit: "水量(m³)",
    itemName: "UPW供水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(100, 120)
      }
    ],
    unit: "水量(m³)",
    itemName: "LSR供水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(100, 120)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(100, 120)
      }
    ],
    unit: "水量(m³)",
    itemName: "Rinse回水"
  }
];

chart2.value = [
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(200, 250)
      }
    ],
    unit: "水量(m³)",
    itemName: "自来水供水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(200, 250)
      }
    ],
    unit: "水量(m³)",
    itemName: "纯水生产线用水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(200, 250)
      }
    ],
    unit: "水量(m³)",
    itemName: "纯水生产线用水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(200, 250)
      }
    ],
    unit: "水量(m³)",
    itemName: "LSR用水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(200, 250)
      }
    ],
    unit: "水量(m³)",
    itemName: "WWT中水供水"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(200, 250)
      }
    ],
    unit: "水量(m³)",
    itemName: "废弃洗涤塔用水量"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(200, 250)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(200, 250)
      }
    ],
    unit: "水量(m³)",
    itemName: "冷却塔用水"
  }
];

chart3.value = [
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(300, 400)
      }
    ],
    unit: "水量(m³)",
    itemName: "酸碱废水系统"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(300, 400)
      }
    ],
    unit: "水量(m³)",
    itemName: "含氟废水系统"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(300, 400)
      }
    ],
    unit: "水量(m³)",
    itemName: "含氨废水系统"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(300, 400)
      }
    ],
    unit: "水量(m³)",
    itemName: "含钴废水系统"
  },
  {
    details: [
      {
        xaxis: "10.1",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.2",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.3",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.4",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.5",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.6",
        value: getRandomInt(300, 400)
      },
      {
        xaxis: "10.7",
        value: getRandomInt(300, 400)
      }
    ],
    unit: "水量(m³)",
    itemName: "含铜废水系统"
  }
];

const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];

function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}

const handleQuery = () => {
  let parmas = {
    systemCode: queryParams.value.systemCode,
    samplingLocationCode: queryParams.value.samplingLocationCode,
    testItem: queryParams.value.testItem,
    samplingTimeStart: dateRange.value[0],
    samplingTimeEnd: dateRange.value[1]
  };
  tableData1.value = [
    {
      id: 1,
      name: "PCW/MAU用水",
      water: getRandomInt(100, 120),
      tbi: getRandomInt(1, 25),
      hbi: getRandomInt(1, 25)
    },
    {
      id: 2,
      name: "UPW供水",
      water: getRandomInt(100, 120),
      tbi: getRandomInt(1, 25),
      hbi: getRandomInt(1, 25)
    },
    {
      id: 3,
      name: "LSR供水",
      water: getRandomInt(100, 120),
      tbi: getRandomInt(1, 25),
      hbi: getRandomInt(1, 25)
    },
    {
      id: 4,
      name: "Rinse回水",
      water: getRandomInt(100, 120),
      tbi: getRandomInt(1, 25),
      hbi: getRandomInt(1, 25)
    }
  ];
  tableData2.value = [
    {
      id: 1,
      name: "自来水供水",
      water: getRandomInt(220, 250),
      tbi: getRandomInt(1, 14),
      hbi: getRandomInt(1, 14)
    },
    {
      id: 2,
      name: "纯水生产线用水",
      water: getRandomInt(220, 250),
      tbi: getRandomInt(1, 14),
      hbi: getRandomInt(1, 14)
    },
    {
      id: 3,
      name: "纯水验证线用水",
      water: getRandomInt(220, 250),
      tbi: getRandomInt(1, 14),
      hbi: getRandomInt(1, 14)
    },
    {
      id: 4,
      name: "LSR用水",
      water: getRandomInt(220, 250),
      tbi: getRandomInt(1, 14),
      hbi: getRandomInt(1, 14)
    },
    {
      id: 5,
      name: "WWT中水供水",
      water: getRandomInt(220, 250),
      tbi: getRandomInt(1, 14),
      hbi: getRandomInt(1, 14)
    },
    {
      id: 6,
      name: "废弃洗涤塔用水量",
      water: getRandomInt(220, 250),
      tbi: getRandomInt(1, 14),
      hbi: getRandomInt(1, 14)
    },
    {
      id: 7,
      name: "冷却塔用水",
      water: getRandomInt(220, 250),
      tbi: getRandomInt(1, 14),
      hbi: getRandomInt(1, 14)
    }
  ];

  tableData3.value = [
    {
      id: 1,
      name: "酸碱废水系统",
      water: getRandomInt(300, 400),
      tbi: getRandomInt(1, 20),
      hbi: getRandomInt(1, 20)
    },
    {
      id: 2,
      name: "含氟废水系统",
      water: getRandomInt(300, 400),
      tbi: getRandomInt(1, 20),
      hbi: getRandomInt(1, 20)
    },
    {
      id: 3,
      name: "含氨废水系统",
      water: getRandomInt(300, 400),
      tbi: getRandomInt(1, 20),
      hbi: getRandomInt(1, 20)
    },
    {
      id: 4,
      name: "含钴废水系统",
      water: getRandomInt(300, 400),
      tbi: getRandomInt(1, 20),
      hbi: getRandomInt(1, 20)
    },
    {
      id: 5,
      name: "含铜废水系统",
      water: getRandomInt(300, 400),
      tbi: getRandomInt(1, 20),
      hbi: getRandomInt(1, 20)
    }
  ];

  chart1.value = [
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(100, 120)
        }
      ],
      unit: "水量(m³)",
      itemName: "PCW/MAU用水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(100, 120)
        }
      ],
      unit: "水量(m³)",
      itemName: "UPW供水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(100, 120)
        }
      ],
      unit: "水量(m³)",
      itemName: "LSR供水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(100, 120)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(100, 120)
        }
      ],
      unit: "水量(m³)",
      itemName: "Rinse回水"
    }
  ];

  chart2.value = [
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(200, 250)
        }
      ],
      unit: "水量(m³)",
      itemName: "自来水供水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(200, 250)
        }
      ],
      unit: "水量(m³)",
      itemName: "纯水生产线用水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(200, 250)
        }
      ],
      unit: "水量(m³)",
      itemName: "纯水生产线用水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(200, 250)
        }
      ],
      unit: "水量(m³)",
      itemName: "LSR用水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(200, 250)
        }
      ],
      unit: "水量(m³)",
      itemName: "WWT中水供水"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(200, 250)
        }
      ],
      unit: "水量(m³)",
      itemName: "废弃洗涤塔用水量"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(200, 250)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(200, 250)
        }
      ],
      unit: "水量(m³)",
      itemName: "冷却塔用水"
    }
  ];

  chart3.value = [
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(300, 400)
        }
      ],
      unit: "水量(m³)",
      itemName: "酸碱废水系统"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(300, 400)
        }
      ],
      unit: "水量(m³)",
      itemName: "含氟废水系统"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(300, 400)
        }
      ],
      unit: "水量(m³)",
      itemName: "含氨废水系统"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(300, 400)
        }
      ],
      unit: "水量(m³)",
      itemName: "含钴废水系统"
    },
    {
      details: [
        {
          xaxis: "10.1",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.2",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.3",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.4",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.5",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.6",
          value: getRandomInt(300, 400)
        },
        {
          xaxis: "10.7",
          value: getRandomInt(300, 400)
        }
      ],
      unit: "水量(m³)",
      itemName: "含铜废水系统"
    }
  ];
  // testQualityqueryReport(parmas).then(res => {
  //   console.log(res);
  //   chartsList.value = res;
  // });
};
const resetQuery = () => {
  queryParams.value = {
    timeUnit: "DAY",
    systemCode: "",
    samplingLocationCode: "",
    testItem: "",
    samplingTimeStart: "",
    samplingTimeEnd: ""
  };
  dateRange.value = [];
};
const loading = ref(true);
function getList() {
  loading.value = true;
  if (queryParams.value.timeUnit == "MONTH") {
    if (dateRange.value != null) {
      queryParams.value.startTime = `${dateRange.value[0]}-01 00:00:00`;
      queryParams.value.endTime = `${dateRange.value[1]}-01 00:00:00`;
    } else {
      queryParams.value.startTime = "";
      queryParams.value.endTime = "";
    }
  }
  if (queryParams.value.timeUnit == "DAY") {
    if (dateRange.value != null) {
      queryParams.value.startTime = `${dateRange2.value[0]}`;
      queryParams.value.endTime = `${dateRange2.value[1]}`;
    } else {
      queryParams.value.startTime = "";
      queryParams.value.endTime = "";
    }
  }
  if (activeWater.value == "load") {
    // chemicalReportqueryLoadReport(queryParams.value).then((response: any) => {
    //   console.log(response);
    //   typeList.value = response;
    //   loading.value = false;
    //   chartsTitle.value = "载入量趋势图";
    // });
  } else {
    // chemicalReportqueryConsumeReport(queryParams.value).then((response: any) => {
    //   console.log(response);
    //   typeList.value = response;
    //   loading.value = false;
    //   chartsTitle.value = "消耗量趋势图";
    // });
  }
}
</script>

<style scoped lang="scss">
.water_col {
  height: 100%;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 10px;

  .co2img {
    position: absolute;
    top: 32px;
    left: 22px;
    width: 32px;
    height: 32px;
  }

  .titlep {
    position: absolute;
    top: 29px;
    left: 70px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }

  .titlevalue {
    position: absolute;
    top: 55px;
    left: 70px;

    .titlevalue1 {
      float: left;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      color: #3b82f6;
    }

    .titlevalue1span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #4f4f4f;
    }

    .titlevalue2 {
      float: left;
      margin-top: 5px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #f87171;
    }
  }

  .co2mian {
    position: absolute;
    top: 112px;
    left: 0;
    width: 100%;
    height: 92px;
  }

  .co2mianleft {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianleftp {
      width: calc(100% - 21px);
      height: 22px;
      padding-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      border-right: 1px solid #cbcdd8;
    }
  }

  .co2mianright {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianrightp {
      width: calc(100% - 45px);
      height: 22px;
      padding-left: 45px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }
  }

  .co2mianleftp2 {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;

    .co2mianleftp2span {
      font-size: 14px;
      font-weight: 400;
      color: #4f4f4f;
    }
  }

  .co2mianleftp3 {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #34d399;
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.percentage-value2 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.percentage-label2 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.percentage-value3 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  color: #f00;
}

.percentage-label3 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #f00;
}

.jindu1 {
  margin: 24px 0 0 17px;
}

.jindu2 {
  margin: 38px calc((100% - 103px) / 2);
}

.jindu1p {
  width: calc(100% - 24px);
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}

.jindu2p {
  width: 100%;
  margin-top: -40px;
  font-size: 14px;
  text-align: center;
}

:deep(.px-table) {
  .px-table__cell {
    padding: 6px 0;
  }

  .px-table__header-wrapper,
  .px-table__fixed-header-wrapper {
    th {
      background-color: #e7eefb !important;
    }
  }
}
</style>
